<template>
  <a-modal
    title="选择入库口"
    width="300px"
    :visible="visible"
    dialogClass="zero-modal"
    @cancel="handleCancel"
  >
    <div class="shk-in-entrance-select-modal">
      <a-select style="width: 100%" v-model="entranceCode" placeholder="请选择入库口">
        <a-select-option v-for="(item,index) in preferredPortList" :key="index" :value="item.code">{{ item.name }}</a-select-option>
      </a-select>
    </div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">取消</a-button>
      <a-button type="primary" key="ok" :disabled="!entranceCode" @click="onConfirm">确认</a-button>
    </template>
  </a-modal> 
</template>

<script>
import { FoamingRuKuOrderExecuteTask } from '@/api/modular/main/FoamingRuKuOrderManage'
export default {
  name:'shkInEntranceSelectModal',
  emits:['update:visible','callback'],
  props:{
    visible:{
      type:Boolean,
      default:false
    },
    preferredPortList:{
      type:Array,
      default:function(){
        return []
      }
    },
    did:{
      type:[Number,null],
      default:null
    }
  },
  data(){
    return {
      entranceCode:undefined
    }
  },
  watch:{
    visible:{
      immediate:true,
      handler(newV,oldV){
        if (newV!==oldV){
          this.initShow()
          this.handleClose()
        }
      }
    }
  },
  created(){
    
  },
  methods:{
    handleCancel(){
      this.$emit('update:visible',false)
    },
    initShow(){
      if (this.visible) {
        
      }
    },
    handleClose(){
      if (!this.visible) {
        this.entranceCode = undefined
      }
    },
    onConfirm(){
      this.$loading.show()
      let params = {
        id:this.did,
        entranceCode:this.entranceCode
      }
      FoamingRuKuOrderExecuteTask(params).then(()=>{
        this.$loading.hide()
        this.$message.success('操作成功');
        this.$emit('callback')
        this.handleCancel()
      }).catch(()=>{
        this.$loading.hide()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.shk-in-entrance-select-modal{
  padding: 8px 16px;
}
</style>